<template>
  <div class="app-container table-app-container">
    <el-row>
      <el-col v-for="o in data" :key="o.id" :span="6" :offset="1">
        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 10px;">
          <div v-if="o.id > -1" style="padding: 14px; height: 288px;">
            <el-form label-width="80px" size="mini">
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="IP" prop="ip">
                    {{ o.ip }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="端口" prop="port">
                    {{ o.port }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="部门" prop="departmentName">
                    {{ o.departmentName }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="标签标题" prop="labelTitle">
                    {{ o.labelTitle }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="标签左边距" prop="labelTitle">
                    {{ o.leftMargin }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="40">
                <el-col :span="24">
                  <el-form-item label="">
                    <el-button type="text" class="button" icon="el-icon-edit" @click="edit(o)">编辑</el-button>
                    <el-button type="text" class="button" icon="el-icon-delete" @click="remove(o)">删除</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div v-if="o.id==-1" style="padding: 14px; height: 288px; text-align: center; line-height: 220px;">
            <el-button icon="el-icon-plus" style="padding: 30px;" circle @click="edit(o)" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <FormDialog title="编辑" :show.sync="dialogFormVisible" width="40%" @on-ok="ok" @on-cancel="cancel">
      <EditForm :id="editId" ref="editForm" :belongs="belongs" />
    </FormDialog>
  </div>
</template>

<script>
import FormDialog from '@neu/biz-core/components/FormDialog'
import EditForm from './components/editForm'
import { list, remove } from '@neu/dcam-ui/api/printer'
import belongs from '@neu/dcam-ui/mixins/belongs'

export default {
  name: 'PrinterListPage',
  components: {
    FormDialog,
    EditForm
  },
  mixins: [belongs],
  data() {
    return {
      data: [],
      dialogFormVisible: false,
      editId: -1
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      list(this.belongs).then(response => {
        const data = response.data
        data.push({
          id: -1
        })
        this.data = data
      })
    },
    edit(obj) {
      // 打开对话框
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.editId = obj.id
    },
    remove(obj) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(obj.id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetch()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.fetch()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    }
  }
}
</script>
